<template>
  <div>
    <div>
      <div class="operator">
        <a-button type="primary" v-hasPermission="'mabFile:add'" ghost @click="addMab">新增</a-button>
        <a-button @click="batchDelete" v-hasPermission="'mabFile:delete'">删除</a-button>
      </div>
      <div>
        <a-table
          :columns="columnsMab"
          :dataSource="dataSourceMabChild"
          :loading="loadingMabChild"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          :scroll="{ x: 900 }"
          :pagination="false"
          @change="handleTableChange">
          <template slot="title" slot-scope="currentPageData">
            子产品列表
          </template>
          ]
          <template slot="mabb" slot-scope="text, record">
            <img :src="record.mab04" width="50" height="50">
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import GlobalVariable from '../../../common/global_variable'
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
export default {
  name: 'editProduct',
  data () {
    return {
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      loadingMabChild: false,
      dataSourceMabChild: [],
      selectedRowKeys: [],
      formItemLayout,
      sortedInfo: null,
      record: {}
    }
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    batchDelete () {
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择需要删除的记录')
        return
      }
      let that = this
      this.$confirm({
        title: '确定删除所选中的记录?',
        content: '当您点击确定按钮后，这些记录将会被彻底删除',
        centered: true,
        onOk () {
          that.$api.goods.deleteMab(that.selectedRowKeys.join(',')).then(() => {
            that.$message.success('删除成功')
            that.selectedRowKeys = []
            that.fetch()
          })
        },
        onCancel () {
          that.selectedRowKeys = []
        }
      })
    },
    // 新增
    addMab () {
      this.$router.push({path: '/goods/mabFile/mabAdds', query: {mab01: this.$route.query.maa01}})
    },
    handleTableChange (pagination, filters, sorter) {
      this.filteredInfo = filters
      this.sortedInfo = sorter
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      })
    },
    fetch (params = {}) {
      console.log(params)
      // 显示loading
      this.loading = true
      this.$api.goods.findMabByMaa01(this.$route.query.maa01).then((r) => {
        console.log(r)
        this.dataSourceMabChild = r.data.data
        this.loading = false
      })
    }
  },
  mounted () {
    this.fetch()
  },
  computed: {
    columnsMab () {
      let {sortedInfo} = this
      sortedInfo = sortedInfo || {}
      return [{
        title: '主图',
        dataIndex: 'mab04',
        scopedSlots: {customRender: 'mabb'}
      }, {
        title: '商品SKU',
        dataIndex: 'mab01'
      }, {
        title: '子供应商SKU',
        dataIndex: 'mab02'
      }, {
        title: '商品状态',
        dataIndex: 'mabacti',
        sorter: true,
        customRender: (text, row, index) => {
          switch (text) {
            case 'Y':
              return '上架'
            case 'N':
              return '下架'
            default:
              return text
          }
        },
        filters: [
          { text: '上架', value: 'Y' },
          { text: '下架', value: 'N' }
        ],
        filterMultiple: false,
        onFilter: (value, record) => record.mabacti.indexOf(value) === 0
      }, {
        title: '描述',
        dataIndex: 'mabdesc'
      }, {
        title: '创建时间',
        dataIndex: 'mabcdate',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'maacdate'
      }, {
        title: '修改时间',
        dataIndex: 'maamdate',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'maacdate'
      }]
    }
  }
}
</script>

<style lang="less" scoped>

</style>
